<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
    xmlns:h="http://java.sun.com/jsf/html"  
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    template="/plantillas/plantilla-publica.xhtml">
    <ui:define name="cabecera">
        <title>Fauna de El Salvador - Mamíferos</title>
    </ui:define>
    <ui:define name="contenido">
        <center>
            <p:panel id="mamiferoPnl" 
                    header="Mastozoología" 
                    style="font-size: 120%; text-align: center; width:80%; min-width:800px !important;">
                    <p id="texto">La teriología, también llamada mastozoología o 
                        mamiferología, es la ciencia que estudia los mamíferos terrestres, 
                        acuáticos y marinos en las diferentes líneas de investigación 
                        que existen. Son varias las características que definen 
                        a la clase Mammalia. Los mamíferos son los únicos vertebrados 
                        que presentan una articulación entre el dentario y el 
                        escamoso; un diafragma muscular que separa las cavidades 
                        torácica y abdominal; y pelos en algún ciclo de su vida. 
                        Además, las hembras en su mayoría presentan glándulas mamarias 
                        con las que alimentan a sus crías.
                    </p>
                <p:spacer height="10"/>
                <h:form id="mamiferoFrm">      
                    <p:dataTable id="mamiferoTbl" 
                                var="mamifero"
                                rows="10"  
                                selectionMode="single"
                                paginator="true" 
                                style="padding: 0 40px"
                                paginatorPosition="bottom"
                                value="#{mamiferoBean.listaMamiferos}"
                                rowKey="#{mamifero.nombrecientifico}"
                                emptyMessage="No hay registros disponibles.">
                        <f:facet name="header">  
                            <h:outputText value="Listado de Mamíferos" 
                                        style="font-size: 115%"/>  
                        </f:facet>
                        <p:column headerText="Nombre científico"
                                filterBy="#{mamifero.nombrecientifico}" 
                                sortBy="#{mamifero.nombrecientifico}" 
                                filterMatchMode="contains"
                                style="font-size: 110%">  
                            <h:outputText id="nombrecientificoTxt" 
                                        value="#{mamifero.nombrecientifico}" />  
                        </p:column>
                        <p:column headerText="Nombre común"
                                filterBy="#{mamifero.nombrecomun}" 
                                sortBy="#{mamifero.nombrecomun}" 
                                filterMatchMode="contains"
                                style="font-size: 110%">  
                            <h:outputText id="nombrecomunTxt" 
                                        value="#{mamifero.nombrecomun}" />
                        </p:column>                      
                        <p:column headerText="Nombres conocidos"
                                filterBy="#{mamiferoBean.getSinonimias(mamifero)}" 
                                sortBy="#{mamiferoBean.getSinonimias(mamifero)}" 
                                filterMatchMode="contains"
                                style="font-size: 110%">  
                            <h:outputText id="nombreantiguoTxt" 
                                        value="#{mamiferoBean.getSinonimias(mamifero)}" />  
                        </p:column> 
                        <p:column headerText="Detalles"
                                styleClass="columna">
                            <p:button title="Detalle" 
                                    outcome="animal"
                                    icon="ui-icon-search">
                                <f:param name="animal" 
                                        value="#{mamifero.codigoanimal}" />
                            </p:button>
                        </p:column>
                    </p:dataTable>
                </h:form>
            </p:panel> 
        </center>
    </ui:define>  
</ui:composition>

